<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <link th:href="@{/webjars/jquery.3.4.1/jquery.js}" rel="stylesheet">
    <link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet">
    <link th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/article.css}" rel="stylesheet">
    <link th:href="@{/css/person.css}" rel="stylesheet">
    <link th:href="@{/css/head.css}" rel="stylesheet" >
    <link th:href="@{/css/foot.css}" rel="stylesheet">
    <link th:href="@{/css/bootstraps.css}" rel="stylesheet"/>
</head>
<body>
    <!--引入导航栏-->
    <div th:include="/common/head :: top"></div>

    <!-- 个人简介 -->
    <div style="clear: both;"></div>
    <!--中间的内容-->

    <div id="contentLeft">
        <nav class="category">
            <ul class="introduction">
                <li><span id="person"><img style="width: 80px;height: 80px;" th:src="@{${user.userProfilePhoto}}"
                    class="ui avatar image" /></span></li>
                <li><a>昵称: [[${user.userName}]] </a></li>
                <li><a th:href="@{'/concern/' + ${user.userId}}">关注: [[${concernNumber}]] </a></li>
                <li><a th:href="@{'/fans/' + ${user.userId}}">粉丝: [[${fansNumber}]] </a></li>
                <li><a th:href="@{'/person/' + ${user.userId}}">文章: [[${articleNumber}]] </a></li>
                <li><a th:href="@{'/collect/' + ${user.userId}}">我的收藏: [[${collectNumber}]] </a></li>
                <li><a>个人介绍: [[${user.userIntroduction}]]</a></li>
                <div th:if="${user.userName} != ${session.loginUser.userName}">
                    <input id="userId" type="hidden" name = "userId"
                       th:value="${session.loginUser.userId}" />
                    <input id="userFriendId" type="hidden" name = "userFriendId"
                       th:value="${user.userId}" />

                    <div class="text-center">
                        <button class="btn btn btn-success" id="addUserConcernBtn"
                                th:if="${b} == false">关注</button>
                    </div>
                    <div class="text-center">
                        <button class="btn btn btn-success" id="cancelUserConcernBtn"
                                th:if="${b} == true">取消关注</button>
                    </div>
                </div>

                <form method="post" th:action="@{'/settings'}">
                    <input class="btn btn btn-success" th:value="修改" th:type="submit"
                           th:if="${user.userName} == ${session.loginUser.userName}">
                </form>
            </ul>
            <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
            <ul class="introduction">
                <li><a>文章分类</a></li>
                <li th:each="list : ${category}">
                    <a th:href="@{'/article/category'(userId=${user.userId},sortId=${list.id})}"
                       th:text="${list.name} + '('+ ${list.number} + '篇' +')' "></a>
                </li>
            </ul>
            <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
            <ul class="introduction">
                <li><a>文章数: [[${articleNumber}]]</a></li>
                <li th:each="list : ${articleList}">
                    <a th:href="@{'/article/detail/' + ${list.articleId}}" th:text="${list.articleTitle}"></a>
                </li>
            </ul>
        </nav>


        <div class="ui top attached teal segment" th:if="${collectNumber} != 0"
             style="width: 66%; float: right; margin-right: 100px;">
            <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
                <div class="ui mobile reversed stackable grid" th:each="list : ${collectInfo.list}">
                    <div class="eleven wide column">
                        <a th:href="@{'/article/detail/' + ${list.article.articleId}}">
                        <h3 class="ui header" th:text="${list.article.articleTitle}">这里是标题</h3>
                        </a>
                        <p class="m-text" th:text="${list.article.articleSummary}">这里是简介</p>
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <img th:src="@{${list.user.userProfilePhoto}}" alt="" class="ui avatar image">
                                        <div class="content"><a class="header">[[${list.user.userName}]]</a></div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i> [[${list.article.articleDate}]]
                                    </div>
                                    <!--<i class="eye icon"></i>-->
                                    <div class="item">阅读数 [[${list.article.articleViewCount}]]</div>
                                    <!--<div class="item">-->
                                        <!--<i class="comment icon"></i> [[${list.article.articleCommentCount}]]-->
                                    <!--</div>-->
                                    <!--<div class="item">-->
                                        <!--<i class="like icon" aria-hidden="true"></i> [[${list.article.articleLikeCount}]]-->
                                    <!--</div>-->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="five wide column">
                        <a th:href="@{'/article/detail/' + ${list.articleId}}">
                            <img th:src="@{${list.article.articlePicture}}" alt="" class="ui rounded image">
                        </a>
                    </div>
                    <hr style="border-bottom: 1px rgb(231, 231, 231) solid; width: 100%"/>
                </div>

                <br><br>

                <div style="text-align: center" th:if="${collectNumber} > 0">
                    <ul class="pagination">
                        <li><a th:href="@{'/collect/'+${user.userId}(pageNum=1)}">首页</a></li>
                        <li><a th:href="@{'/collect/'+${user.userId}(pageNum=${collectInfo.hasPreviousPage}
                                ?${collectInfo.prePage}:1)}">上一页</a></li>
                        <li><a th:each="i : ${#numbers.sequence(1,collectInfo.pages)}"
                               th:href="@{'/collect/'+${user.userId}(pageNum=${i})}">[[${i}]]</a></li>
                        <li><a th:href="@{'/collect/'+${user.userId}(pageNum=${collectInfo.hasNextPage}
                                ?${collectInfo.nextPage}:${collectInfo.pages})}">下一页</a></li>
                        <li><a th:href="@{'/collect/'+${user.userId}(pageNum=${collectInfo.pages})}">尾页</a></li>
                    </ul>
                </div>

            </div>
        </div>

    </div>



    <!--引入底部栏-->
    <div th:include="/common/foot :: foot"></div>
</body>
    <script th:src="@{/js/myJs/prism.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>

    <script>
        // 增加用户关注事件
        $('#addUserConcernBtn').click(function() {
            var userId = $('#userId').val();
            var userFriendId = $('#userFriendId').val();
            var json = {
                userId: userId,
                userFriendId: userFriendId
            };
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            url: "http://localhost:8081/user/concern",
            data: JSON.stringify(json),
            success: function() {
                // 刷新页面
                alert("添加成功");
                location.reload();
            },
            error: function() {
                location.reload();
                }
            });
        });

        //取消用户关注事件
        $('#cancelUserConcernBtn').click(function () {
            var userId = $('#userId').val();
            var userFriendId = $('#userFriendId').val();

            $.ajax({
                type: "DELETE",
                url: "http://localhost:8081/user/cancelConcern/" + userId + "/" + userFriendId,
                success: function() {
                    // 刷新页面
                    location.reload();
                }
            });
        });

</script>

</html>